<template>
  <!-- 首页 -->
	<view class="homeLayout pageBg">
    <!-- 返回键 -->
    <custom-nav-bar></custom-nav-bar>
    <!-- 轮播图 -->
	  <view class="banner">
      
      <!-- 公告 -->
	    <swiper indicator-dots indicator-color="#c8c7cc" indicator-active-color="#fff" autoplay="true" circular="true">
	      <swiper-item v-for="item in bannerList" :key="item._id">
	        <image :src="item.picurl" mode="aspectFill"></image>
	      </swiper-item>
        
	    </swiper>
	  </view>
  <div class="notice">
    
    <!-- 滚动公告 -->
    <div class="left">
      <uni-icons type="sound-filled" size="20" color="$brand-theme-color"></uni-icons>
      <text class="text">公告</text>
    </div>
    <div class="center">
      <swiper vertical autoplay interval="1500" duration="300" circular>
        <swiper-item v-for="item in noticeList" :key="item._id">
          <navigator url="/pages/notice/detail">{{item.title}}</navigator>
        </swiper-item>
      </swiper>
    </div>
    <div class="right">
      <uni-icons type="forward" size="20" color="$brand-theme-color"></uni-icons>
    </div>
  </div>
  <div class="select">
    <!-- 每日推荐 -->
    <div class="tuijian">
      <!-- 组件插槽 -->
      <common-title>
      <template #title-name>
        <div>每日推荐</div> 
      </template>
      <template #title-custom>
        <view class="left-date">
          <uni-icons type="calendar" size="30" color="$brand-theme-color"></uni-icons>
          <div class="date">
            <uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
          </div>
        </view>
      </template>
    </common-title>
    <!-- 照片 -->
    <div class="content">
      <scroll-view scroll-x show-scrollbar="false">
        <view class="box" v-for="item in dayList" :key="item._id" @click="goPre">
            <image :src="item.smallPicurl" mode="aspectFill"></image>  
          
        </view>
      </scroll-view>
    </div>
    </div>
  </div>
    <!-- 专题精选 -->
    <div class="choose">
      <common-title>
        <template #title-name>
          <div>专题精选</div> 
        </template>
        <template #title-custom>
          <view class="more">
            <navigator url="/pages/classList/classList" class="text">查看更多</navigator>
            <uni-icons class="right" type="right" size="15" color="$brand-theme-color"></uni-icons>
          </view>
          
        </template>
      </common-title>
      <div class="content" >
        <choose-item v-for="item in classifyList" 
		:key="item._id"
		:item="item"
		></choose-item>
        <choose-item :isMore="true"></choose-item>
      </div>
      
    </div>
</view>
</template>

<script setup>
import {apiGetBanner,apiGetDayRodom,apiGetNotice,apiGetClassity} from "../../api/apis.js"
import {request} from "../../utils/request.js"
import { ref } from 'vue';
const bannerList = ref('');
const dayList=ref('')
const noticeList = ref('')
const classifyList = ref('')
const getBanner = async () => {
  let res = await apiGetBanner();
  bannerList.value=res.data;
};

// 获取日期
const getDayRandom = async()=>{
  let res = await apiGetDayRodom();
	dayList.value=res.data;
}

// 获取滚动公告
const getNotice =async ()=>{
	let res = await apiGetNotice({select:true});
	noticeList.value=res.data;
}

const getClassify = async ()=>{
	let res=await apiGetClassity({
		pageSize:8
	});
	classifyList.value=res.data
	
}

// 返回
const goPre = ()=>{
  uni.navigateTo({
    url:'/pages/preView/preView'
  })
}

getBanner()
getDayRandom()
getNotice()
getClassify()
</script>

<style lang="scss" scoped>
	.homeLayout{
    .banner{
      width: 750rpx;
      padding: 30rpx 0;
      swiper{
        width: 750rpx;
        height: 340rpx;
        &-item{
          width: 100%;
          height: 100%;
          padding: 0 30rpx;
          image{
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
      }
    }
  .notice{
    width: 690rpx;
    height:80rpx;
    background-color: #f9f9f9;
    margin: 0 auto;
    border-radius: 40rpx;
    display: flex;
    line-height: 80rpx;
    .left{
      width: 140rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      :deep(){
          .uni-icons{
          color: $brand-theme-color;
        }
      }
      
      .text{
        color: $brand-theme-color;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
    .center{
      flex: 1;
      swiper{
        height: 100%;
        swiper-item{
          height: 100%;
          font-size: 30rpx;
          color: #6666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .right{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70rpx;
      font-weight: 500;
      font-size: 28rpx;
      :deep(){
          .uni-icons{
          color: $brand-theme-color;
        }
      }
    }
  }
  // 每日推荐
  .select{
    padding-top: 50rpx;
    .left-date{
      display: flex;
      align-items: center;
      justify-content: center;
      color: $brand-theme-color;
      .date{
        margin-left: 10rpx;
      }
    }
    .content{
      width: 720rpx;
      margin-left: 30rpx;
      margin-top: 30rpx;
      
      scroll-view{
        white-space: nowrap;
        .box{
          width: 200rpx;
          height: 430rpx;
          display: inline-block;
          margin-right: 15rpx;
          
          image{
            border-radius: 8rpx;
            height: 100%;
            width: 100%;
          }
        }
        .box:last-child{
          margin-right: 30rpx;
        }
      }
    }
  }
  .choose{
    padding: 50rpx 0;
    .more{
      font-size: 30rpx;
      color: $brand-theme-color;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content{
      margin-top: 30rpx;
      padding: 0 30rpx;
      display: grid;
      gap: 15rpx;
      grid-template-columns: repeat(3,1fr);
      box-sizing: border-box;
    }
  }
}
</style>
